﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="row" style="margin-top:20px;">
    <div class="col-xs-6">
        <div class="panel panel-default">
            <div class="panel-heading">用户表单</div>
            <div class="panel-body">
                <div class="form-group">
                    <label>姓名：</label>
                    <input type="text" class="form-control" placeholder="姓名" data-bind="textInput:UserName" />
                </div>
                <div class="form-group">
                    <label>年龄：</label>
                    <input type="text" class="form-control" placeholder="年龄" data-bind="textInput:Age" />
                </div>
                <div class="form-group">
                    <label>性别：</label>
                    <select class="form-control" data-bind="value:Sex">
                        <option value="0">未知</option>
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="panel panel-default">
            <div class="panel-heading">用户信息</div>
            <div class="panel-body">
                <div class="form-group">
                    <label>姓名：</label>
                    <span data-bind="text:UserName"></span>
                </div>
                <div class="form-group">
                    <label>年龄：</label>
                    <span data-bind="text:Age"></span>
                </div>
                <div class="form-group">
                    <label>性别：</label>
                    <!-- ko if: Sex() == '0' -->
                    <span>未知</span>
                    <!-- /ko -->
                    <!-- ko if: Sex() == '1' -->
                    <span>男</span>
                    <!-- /ko -->
                    <!-- ko if: Sex() == '2' -->
                    <span>女</span>
                    <!-- /ko -->
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <button type="button" class="btn btn-default" onclick="setViewModel();">使用代码来赋值</button>
        <button type="button" class="btn btn-default" data-bind="click: GetJsonString">ViewModel转换为Json字符串</button>
        <button type="button" class="btn btn-default" data-bind="click: GetJSObject">ViewModel转换为JS对象</button>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        var mViewModel;
        var ViewModel = function () {
            var self = this;
            self.UserName = ko.observable();
            self.Age = ko.observable();
            self.Sex = ko.observable();
            self.GetJsonString = function () {
                layer.alert(ko.toJSON(self), { icon: 6 });
            };
            self.GetJSObject = function () {
                var userInfo = ko.toJS(self);
                layer.alert("姓名：" + userInfo.UserName + ",年龄：" + userInfo.Age + ",性别：" + userInfo.Sex, { icon: 6 });
            };
        };
        function setViewModel() {
            mViewModel.UserName("代码赋值张三！");
            mViewModel.Age("18");
            mViewModel.Sex("1");
        }

        $(document).ready(function () {
            mViewModel = new ViewModel();
            ko.applyBindings(mViewModel);
        });
    </script>
}